<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>

<script src="js/libs/charts/jquery.flot.min.js"></script>

<script src="js/libs/charts/jquery.flot.pie.min.js"></script>
<style>
#incidentProjectChart .flot-tick-label {
	text-overflow: ellipsis;
	overflow: hidden;
	max-height: 20px;
}

.monitd {
	vertical-align: middle;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 0;
}
</style>
<div class="header">
	<h3 id="incidentMonitorTitle">事件监控</h3>
</div>
<table style="width:100%;">
	<tr>
		<td style="width:60%;padding:0px;margin-top:10px;vertical-align:top;">
			<table style="width:100%;">
				<tr
					style="background-color:#f5f5f5;height:30px;text-align:left;border-top:1px solid #cecece;">
					<th style="width:3%"></th>
					<th style="width:4%"></th>

					<th>标题</th>
					<th style="width:23%">事件类型</th>
					<th style="width:13%">请求人</th>
					<th style="width:21%">登记时间</th>
					<th style="width:10%">状态</th>

				</tr>
			</table>
			<div id="autoscroll"
				style="overflow: hidden; height: 568px;padding:0px;margin:0px;font-size:15px;">

				<table id="scrolltablect" style="table-layout:fixed;width:100%;">

				</table>
			</div>
		</td>
		<td style="padding-left:10px;">
			<div class="box no-border"
				style="padding:0px 0 5px 0px;margin-top:-57px;">
				<div class="m m7 box-left" style="width:50%;height:260px">
					<div class="mt header">
						<h3>按事件级别分布</h3>
					</div>
					<div class="mc">
						<div id="incidentPriorityChart" style="height: 250px;"></div>
					</div>

				</div>

				<div class=" m m7 box box-right" style="width:50%;">
					<div class="mt header">
						<h3>按事件状态分布</h3>
					</div>
					<div class="mc">
						<div id="incidentStatusChart" style="height: 250px;"></div>
					</div>
				</div>
			</div>

			<div class="box no-border">

				<div class="m m7 box-left" style="width:50%;height:260px">
					<div class="mt header">
						<h3>按SLA状态分布</h3>
					</div>
					<div class="mc">
						<div id="incidenSLAStatusChart" style="height: 250px;"></div>
					</div>
				</div>

				<div class=" m m7 box box-right" style="width:50%;">
					<div class="mt header">
						<h3>所在项目分布</h3>
					</div>

					<div class="mc">
						<div id="incidentProjectChart" style="height: 250px;"></div>
					</div>
				</div>
			</div> <script type="text/javascript">
				//var priorityColors = [ "#D13936", "#C88663", "#D9C65F", "#100FB2", "#6EB332" ];

				function createchart() {
					$.getJSON("incident/incident/getPriorityData", function(json) {
						var priorityColors = [];

						$(json).each(function(index, item) {
							switch (item.label) {

							case "一级":
								priorityColors.push("red");
								break;
							case "二级":
								priorityColors.push("orange");
								break;
							case "三级":
								priorityColors.push("yellow");
								break;
							case "四级":
								priorityColors.push("blue");
								break;
							case "五级":
								priorityColors.push("green");
								break;
							case "未设置级别":
								priorityColors.push("gray");
								break;
							}
						});

						createPlotChartByJsonData(json, "事件级别", "priority_name", "incidentPriorityChart", priorityColors);
					});

					$.getJSON("incident/incident/getStatusData", function(json) {
						createChartByJsonData(json, "状态", "status", "incidentStatusChart");
					});

					$.getJSON("incident/incident/getCategoryData", function(json) {
						createChartByJsonData(json, "事件分类", "cname", "incidentProjectChart");
					});

					$.getJSON("incident/incident/getSLAStatusData", function(json) {
						var slaColors = [];

						$(json).each(function(index, item) {
							switch (item.label) {
							case "异常":
								slaColors.push("red");
								break;
							case "正常":
								slaColors.push("green");
								break;
							}
						});

						createPlotChartByJsonData(json, "SLA状态", "sla_status", "incidenSLAStatusChart", slaColors);
					});

				}

				function createPlotChartByJsonData(json, name, nameColumn, id, colors, callback) {

					$.plot("#" + id, json, {
						series : {
							pie : {
								show : true,
								radius : 1,
								label : {
									show : true,
									radius : 2 / 3,
									formatter : function(label, series) {
										return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + series.data[0][1] + '</div>';

									}
								}

							}
						},
						grid : {
							hoverable : true,
							borderWidth : 2,
							backgroundColor : {
								colors : [ "#ffffff", "#EDF5FF" ]
							},
							clickable : true
						},
						colors : colors,
					});

					$("#" + id).bind("plotclick", function(event, pos, item) {
						if (item && item.series && item.series.label) {

							var postData = incidentMonitorGrid.jqGrid.jqGrid('getGridParam', 'postData');
							$.extend(postData, {
								filters : ""
							});
							var filters = [ {
								"field" : "process_id",
								"op" : "ne",
								"data" : ""
							} ];

							if (item.series.label == "正常") {

								filters.push({
									"field" : nameColumn,
									"op" : "ne",
									"data" : 1
								});

							} else if (item.series.label == "异常") {

								filters.push({
									"field" : nameColumn,
									"op" : "eq",
									"data" : 1
								});
							} else if (item.series.label == "未设置级别") {
								filters.push({
									"field" : nameColumn,
									"op" : "isnull",
									"data" : ""
								});
							} else {
								filters.push({

									"field" : nameColumn,
									"op" : "eq",
									"data" : item.series.label
								});
							}

							incidentMonitorGrid.search(filters);
							$("#incidentMonitorTitle").text(name + "【" + item.series.label + "】事件监控列表");
						}
					});

				}

				function createChartByJsonData(json, name, nameColumn, id, callback) {

					var data = [ json.length ];
					var ticks = [ json.length ];
					for ( var i = 0; i < json.length; i++) {
						var val = json[i];
						var labelTxt = val[nameColumn];
						if (labelTxt) {
							Array
							arr = new Array(i, val.result_count);

							labelTxt

							Array
							tArr = new Array(i, val[nameColumn]);

							data[i] = arr;
							ticks[i] = tArr;
						}
					}

					var dataset = [ {
						label : "按" + name + "分布图",
						data : data,
						color : "#5482FF"
					} ];

					var options = {
						series : {
							bars : {
								show : true,
								showNumbers : true
							}
						},
						bars : {
							align : "center",
							barWidth : 0.5
						},
						xaxis : {
							axisLabel : name,
							mode : "categories",
							tickLength : 0,
							ticks : ticks
						},
						yaxis : {
							axisLabel : "按" + name + "发布"
						},
						legend : {
							noColumns : 0,
							labelBoxBorderColor : "#000000",
							position : "nw"
						},
						grid : {
							hoverable : true,
							borderWidth : 2,
							backgroundColor : {
								colors : [ "#ffffff", "#EDF5FF" ]
							},
							clickable : true
						}
					};

					$.plot($("#" + id), dataset, options);

					$("#" + id).bind("plotclick", function(event, pos, item) {
						if (item && item.series && item.series.yaxis) {

							var postData = incidentMonitorGrid.jqGrid.jqGrid('getGridParam', 'postData');
							$.extend(postData, {
								filters : ""
							});

							incidentMonitorGrid.search([ {
								"field" : "process_id",
								"op" : "ne",
								"data" : ""
							}, {
								"field" : nameColumn,
								"op" : "eq",
								"data" : item.series.xaxis.ticks[item.dataIndex].label
							} ]);
							$("#incidentMonitorTitle").text(name + "【" + item.series.xaxis.ticks[item.dataIndex].label + "】事件监控列表");
						}
					});

				}

				function incidentMonitorGridActions(rowObject) {
					return isperp.createGridAction({
						title : '催办',
						iconCls : 'icon-notify',
						onclick : "isperp.openDialog({title:'事件催办',windowSize:'normal',contentUrl:'app/message/sender/sendEdit?title=【催办】事件编号【" + rowObject.title + "】请速处理&sourceId=" + rowObject.id + "'})"
					}) + isperp.createGridAction({
						title : '转派',
						iconCls : 'icon-change',
						onclick : "isperp.workflow.transferAssignee('" + rowObject.process_id + "')"
					});

				}
			</script></td>

	</tr>
</table>
<script type="text/javascript">
	function statusFormatter(rowObject) {
		var p = 0, html = "", title = "";
		if (rowObject.priority_name != null) {

			switch (rowObject.priority_name) {
			case "一级":
				p = 1;
				break;
			case "二级":
				p = 2;
				break;
			case "三级":
				p = 3;
				break;
			case "四级":
				p = 4;
				break;
			case "五级":
				p = 5;
				break;
			}
			title = "优先级：" + p + "级";
		} else {
			title = "未确定优先级";
		}

		html = "<img title='"+title+"' src='img/incident/p"+p+".png'>";
		if (rowObject.sla_status == 1) {

			html = html + "&nbsp;<img title='SLA：异常'  src='img/incident/sla_unusual.png'>";
		}
		return html;
	}
	var times = 0;
	function startmarquee(lh, speed, delay) {
		var t;
		var oHeight = 550; /**/
		/** div的高度 **/
		var p = false;
		var o = document.getElementById("autoscroll");
		var preTop = 0;
		o.scrollTop = 0;
		function start() {
			t = setInterval(scrolling, speed);
			o.scrollTop += 1;
		}
		function scrolling() {

			if (o.scrollTop % lh != 0 && o.scrollTop % (o.scrollHeight - oHeight - 1) != 0) {
				preTop = o.scrollTop;
				o.scrollTop += 1;
				if (preTop >= o.scrollHeight || preTop == o.scrollTop) {
					createList();
					createchart();
					o.scrollTop = 0;
				}
			} else {

				times += 1;
				if (times > 40) {
					createList();
					createchart();
					times = 0;
					// createList();
					//  createchart();
				}
				clearInterval(t);
				setTimeout(start, delay);
			}
		}
		setTimeout(start, delay);
	}
	$(function() {
		createchart()
		createList();
		startmarquee(50, 20, 1500);
	});

	function createList() {
		//
		$.getJSON("incident/incident/monitorList", function(data) {
			var listr_similerincident = "";
			for ( var i = 0; i < data.content.length; i++) {
				var id = data.content[i].id;
				var code = data.content[i].code;
				var title = data.content[i].title;
				var incidentcategory = data.content[i].icd_category_name;
				var curuser = data.content[i].cus_user_name;
				var create_date = data.content[i].create_date;
				var status = data.content[i].status;
				var supporter_name = data.content[i].supporter_name;
				var bordertop = "border-top:1px solid #cecece";
				var trcolor = ";background-color:#FFFF66";
				var priority_name = data.content[i].priority_name;
				var sla_status = data.content[i].sla_status;
				var fontcolor = "";
				if (incidentcategory == undefined)
					incidentcategory = "";
				if (sla_status != undefined)
					fontcolor = ";color:red";

				var pri_num = "";
				if (priority_name == "一级") {
					pri_num = "1";
				} else if (priority_name == "二级") {
					pri_num = "2";
				} else if (priority_name == "三级") {
					pri_num = "3";
				} else if (priority_name == "四级") {
					pri_num = "4";
				} else {
					pri_num = "0";
					priority_name = "未确定";

				}

				var priImgstr = "<img title='优先级："+priority_name+"' src='img/incident/p"+pri_num+".png'>";
				if (i != 0)
					bordertop = "";
				if (i % 2 != 0)
					trcolor = ";background-color:#99CCFF";
				listr_similerincident += "<tr class='nui-txt-link' style='height:50px;border-bottom:1px solid #d5d6d7;line-height:1em;"+bordertop+fontcolor+"'>";
				listr_similerincident += "<td style='width:3%;' class='monitd'>" + (i + 1) + "</td>";
				listr_similerincident += "<td style='width:4%;' class='monitd'>" + priImgstr + "</td>";

				listr_similerincident += "<td style='' class='monitd' title='"+title+"''>" + title + "</td>";
				listr_similerincident += "<td style='width:23%;' class='monitd'>" + incidentcategory + "</td>";
				listr_similerincident += "<td style='width:13%;' class='monitd'>" + curuser + "</td>";
				listr_similerincident += "<td style='width:21%;' class='monitd'>" + create_date + "</td>";
				listr_similerincident += "<td style='width:10%;' class='monitd'>" + status + "</td>";

				listr_similerincident += "</tr>";
			}
			$("#scrolltablect").html("");
			$("#scrolltablect").append($(listr_similerincident));
		});
	}
</script>